package com.example.layoutincompose

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.*
import java.nio.file.WatchEvent


// ConstraintLayout 约束布局
object ConstraintLayoutDemo {
}

@Composable
fun ConstraintLayoutDemo() {
    ConstraintLayout {
        // 初始化声明两个元素，如果只声明一个，则可用 createRef() 方法
        // 这里声明的类似于 View 的 id
        val (button, text) = createRefs()

        Button(
            onClick = {},
            // constrainAs() 将 Composable 组件与初始化的引用关联起来
            // 关联之后就可以在其他组件中使用并添加约束条件了
            modifier = Modifier.constrainAs(button) {
                // 熟悉 ConstraintLayout 约束写法的一眼就懂
                // parent 引用可以直接用，跟 View 体系一样
                top.linkTo(parent.top, margin = 20.dp)
                start.linkTo(parent.start, margin = 10.dp)
            }
        ) {
            Text("Button")
        }

        Text(text = "Text", Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
            start.linkTo(button.start)
            centerHorizontallyTo(parent)  // 摆放在 ConstraintLayout 水平中间
        })
    }
}


@Composable
fun ConstraintLayoutDemo1() {
    ConstraintLayout {
        val (button1, button2, text) = createRefs()
        Button(
            onClick = {},
            modifier = Modifier.constrainAs(button1) {
                top.linkTo(parent.top, margin = 20.dp)
                start.linkTo(parent.start, margin = 10.dp)
            }
        ) {
            Text("Button1")
        }

        Text(text = "Text文本", Modifier.constrainAs(text) {
            top.linkTo(button1.bottom)
            // 将 Text 的中心摆放在 button1 右边界的位置
            centerAround(button1.end)
        })

        // 设置一个 button1 和 text 右边的一个栅栏，将两者放在栅栏的左侧
        val barrier = createEndBarrier(button1, text)
        val barrier1 = createAbsoluteRightBarrier(text)
        Button(
            onClick = {},
            modifier = Modifier.constrainAs(button2) {
                top.linkTo(parent.top, margin = 20.dp)
                // 将 button2 放在栅栏的右侧
                start.linkTo(barrier1)
            }
        ) {
            Text(text = "button2")
        }
    }
}


@Composable
fun LargeConstraintLayout() {
    ConstraintLayout(Modifier.fillMaxHeight()) {
        val text = createRef()

        val guideline1 = createGuidelineFromStart(fraction = 0.5f)
        Text(text = "This text is very very very very very very very very very very long",
            modifier = Modifier.constrainAs(text) {
                linkTo(start = guideline1, end = parent.end)
                width = Dimension.preferredWrapContent
            }
        )

        val text1 = createRef()
        val guideline2 = createGuidelineFromTop(fraction = 0.333f)
        Text(text = "我距离屏幕上方约三分之一处~",
            modifier = Modifier.constrainAs(text1) {
                top.linkTo(guideline2)
            }
        )
    }
}


@Composable
fun ConstraintLayoutChainDemo() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (box1, box2, box3) = createRefs()
        createHorizontalChain(box1,box2,box3, chainStyle = ChainStyle.Packed)

        Box(modifier = Modifier.size(100.dp).background(Color.Red).constrainAs(box1){})
        Box(modifier = Modifier.size(100.dp).background(Color.Green).constrainAs(box2){})
        Box(modifier = Modifier.size(100.dp).background(Color.Blue).constrainAs(box3){})
    }
}


@Composable
fun DecoupledConstraintLayout() {
    BoxWithConstraints() {
        val constraints = if (maxWidth < maxHeight) {
            // 竖屏
            decoupledConstraints(false)
        } else {
            // 横屏
            decoupledConstraints(true)
        }

        ConstraintLayout(constraints) {
            Button(
                onClick = { /*TODO*/ },
                // layoutId 必须与 ConstraintSet 中的一致
                Modifier.layoutId("button")
            ) {
                Text(text = "Button")
            }

            Text(
                text = "Text",
                Modifier.layoutId("text")
            )
        }
    }
}

private fun decoupledConstraints(isPad: Boolean): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        if (isPad) {
            // 横屏模式
            constrain(button) {
                top.linkTo(parent.top, 15.dp)
                start.linkTo(parent.start, 30.dp)
            }
            constrain(text) {
                top.linkTo(parent.top, 15.dp)
                start.linkTo(button.end, 20.dp)
            }
        } else {
            // 竖屏模式
            constrain(button) {
                top.linkTo(parent.top, 30.dp)
                start.linkTo(parent.start, 15.dp)
            }
            constrain(text) {
                top.linkTo(button.bottom, 20.dp)
                start.linkTo(parent.start, 15.dp)
            }
        }

    }
}


// 如何让一个组件的高度随着另一个组件的高度变化而变化
@Composable
fun Example() {
    ConstraintLayout(
        modifier = Modifier.background(Color.Yellow).padding(10.dp)) {
        val (box1, box2) = createRefs()

        Box (
            modifier = Modifier.constrainAs(box1){
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }.background(Color.Green).height(50.dp).fillMaxWidth(0.5f)){
        }

        Box (
            modifier = Modifier.constrainAs(box2){
                height = Dimension.fillToConstraints
                top.linkTo(box1.top)
                bottom.linkTo(box1.bottom)
                start.linkTo(box1.end)
                end.linkTo(parent.end)
            }.background(Color.Red).fillMaxWidth(0.5f)){

        }
    }
}

